<template>
  <div>
    <k-form-design
      ref="kfd"
      :showHead="showHead"
      :title="title"
      :toolbars="['save', 'preview', 'importJson', 'exportJson', 'reset', 'close']"
      @save="handleSave"
      showToolbarsText
      @close="handleClose"
      :hideModel="true"
    />

    <a-modal
      :visible="visible"
      :confirm-loading="loading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="否"
      okText="是"
    >
      <p> 是否保存？</p>
    </a-modal>
  </div>
</template>

<script>

  import { addWorksheet, updateWorksheet } from '@/api/worksheet'

  export default {
    name: 'EditWorksheet',
    data () {
      return {
        mdl: null,
        showHead: false,
        title: "",
        jsonData: {
          list: [
            {
              type: 'textarea',
              label: '文本框',
              icon: 'icon-edit',
              options: {
                width: '100%',
                minRows: 4,
                maxRows: 6,
                defaultValue: '',
                disabled: false,
                placeholder: '请输入'
              },
              model: 'textarea_1584772782841',
              key: 'textarea_1584772782841',
              rules: [
                {
                  required: false,
                  message: '必填项'
                }
              ]
            }
          ],
          config: {
            layout: 'horizontal',
            labelCol: {
              span: 4
            },
            wrapperCol: {
              span: 18
            },
            hideRequiredMark: false,
            customStyle: ''
          }
        },
        layoutFields: ['divider', 'card', 'tabs', 'grid', 'table'],
        visible: false,
        loading: false,
      }
    },
    methods: {
      handleSave (values) {
        // 这里处理一下字段数据，如果有id则为修改操作，否则为添加操作
        const data = this.dealParams(values)
        console.log('保存数据', data)
        let updateOrAdd;
        if (data.id) {
          // 修改
          updateOrAdd = this.handleUpdate
        } else {
          // 保存
          updateOrAdd = this.handleAdd
        }

        updateOrAdd(data).then(res => {
          if (res.code === 200) {
            this.$message.info('保存成功')
            this.$router.push({
              name: 'ViewWorksheet'
            })
          } else {
            this.$message.error('保存失败')
          }
        })
      },
      handleAdd (data) {
        return addWorksheet(data)
      },
      handleUpdate (data) {
        return updateWorksheet(data)
      },
      dealParams (values) {
        const data = JSON.parse(values)
        const arr = []
        data.list.forEach(v => {
          if (!this.layoutFields.includes(v.type)) {
            arr.push({
              name: v.key,
              alia: v.label,
              dataType: v.type,
              options: v.options
            })
          }
        })

        const param = {
          wsName: this.mdl.wsName,
          fields: arr,
          config: values,
          visualData: this.mdl.visualData
        }

        if (this.mdl.id) {
          param['id'] = this.mdl.id
        }
        return param
      },
      importData (jsonData) {
        this.jsonData = jsonData
        this.$refs.kfd.handleSetData(this.jsonData)
      },
      handleClose () {
        // 关闭，触发close事件
        this.visible = true
      },
      handleReset () {
        // 清除表单
        this.$refs.kfd.handleReset()
      },
      handleOk () {
        this.$refs.kfd.handleSave()
      },
      handleCancel () {
        this.$router.push({
          name: 'ViewWorksheet'
        })
      },
      initData () {
        this.mdl = this.$route.params.mdl
        if (this.mdl) {
          if (this.mdl.wsName) {
            this.showHead = true
            this.title = this.mdl.wsName
          }

          if (this.mdl.config) {
            // 更新一下 options
            const jsonData = JSON.parse(this.mdl.config)
            this.mdl.fields.forEach(field => {
              jsonData.list.forEach(f => {
                if (field.name === f.key) {
                  f.options = field.options
                }
              })
            })
            this.importData(jsonData)
          }
        }
      }
    },
    mounted () {
      this.initData()
    }
  }
</script>

<style scoped>

</style>
